<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import upMoreImg from "@/components/public/upMoreImg.vue";
import defUpImg from "@/components/public/defUpImg.vue";
import serchMap from "@/components/public/serchMap.vue";
import cropperCom from "@/components/public/cropperCom.vue";
import cropperMore from "@/components/public/cropperMore.vue";

import { SchoolAdd, SchoolEdit, SchoolDetail } from "@/http/api";
export default {
  components: {
    outMain,
    upMoreImg,
    defUpImg,
    serchMap,
    cropperCom,
    cropperMore,
  },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkAddress = (rule, value, callback) => {
      if (this.formData.school_address == "") {
        callback(new Error("学校地址不能为空"));
      } else if (
        this.formData.longitude == "" ||
        this.formData.latitude == ""
      ) {
        callback(new Error("地址经纬度获取失败"));
      } else {
        callback();
      }
    };
    return {
      detailId: this.$route.query.id,
      showCont: false,
      formData: {
        school_logo: "",
        school_name: "",
        school_person: "",
        school_person_mobile: "",
        school_address: "",
        longitude: "",
        latitude: "",
        school_introduction: "",
        school_zscyqk: "",
        school_jtzn: "",
        school_qtsm: "",
        school_banner: "",
      },
      imgList: [],
      rules: {
        school_logo: [
          {
            required: true,
            message: "请选择学校logo",
            trigger: "change",
          },
        ],
        school_banner: [
          {
            required: true,
            message: "请选择学校轮播图",
            trigger: "change",
          },
        ],
        school_name: [
          {
            required: true,
            message: "请输入学校名称",
            trigger: "blur",
          },
        ],
        school_name: [
          {
            required: true,
            message: "请输入学校名称",
            trigger: "blur",
          },
        ],
        school_person: [
          {
            required: true,
            message: "请输入学校负责人",
            trigger: "blur",
          },
        ],
        school_person_mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
        school_address: [
          {
            validator: checkAddress,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    getMap(data) {
      this.formData.school_address = data.address;
      this.formData.latitude = data.latitude;
      this.formData.longitude = data.longitude;
    },
    backFn() {
      this.$router.back();
    },
    getImg(arr) {
      if (arr.length > 0) {
        this.formData.school_banner = arr
          .map((item) => {
            return item.img;
          })
          .join(", ");
      } else {
        this.formData.school_banner = "";
      }
      // this.formData.school_banner = src;
    },
    getCoverImg(src) {
      this.formData.school_logo = src;
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      const { data } = this.detailId
        ? await SchoolEdit(this.formData)
        : await SchoolAdd(this.formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      SchoolDetail({ school_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          let resData = res.data.data;
          delete resData.school_status;
          this.formData = resData;
          console.log(resData.school_banner);
          if (resData.school_banner) {
            this.imgList = resData.school_banner.split(",").map((item) => {
              return { img: item };
            });
          }
          console.log(this.imgList);
          this.showCont = true;
        }
      });
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {
    if (this.detailId) {
      this.getData();
    } else {
      this.showCont = true;
    }
  },
  created() {},
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>{{ detailId ? "编辑" : "新增" }}学校</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form :rules="rules" ref="ruleForm" :model="formData">
          <div class="flexCont" v-if="showCont">
            <el-form-item
              class="flexPull"
              label="学校logo"
              label-width="120"
              prop="school_logo"
            >
              <cropperCom
                :propImg="formData.school_logo"
                @successCropper="getCoverImg"
              ></cropperCom>
            </el-form-item>
            <el-form-item label="学校名称" label-width="120" prop="school_name">
              <el-input
                clearable
                placeholder="请输入学校名称"
                v-model="formData.school_name"
              />
            </el-form-item>
            <el-form-item label="负责人" label-width="120" prop="school_person">
              <el-input
                clearable
                placeholder="请输入学校负责人"
                v-model="formData.school_person"
              />
            </el-form-item>
            <el-form-item
              label="手机号"
              label-width="120"
              prop="school_person_mobile"
            >
              <el-input
                clearable
                placeholder="请输入负责人手机号"
                v-model="formData.school_person_mobile"
              />
            </el-form-item>
            <el-form-item label=" " label-width="120"> </el-form-item>
            <el-form-item
              label="详细地址"
              prop="school_address"
              class="flexPull"
              label-width="120"
            >
              <serch-map
                :propVal="formData.school_address"
                @getMapInfo="getMap"
              ></serch-map>
            </el-form-item>
            <el-form-item label="学校简介" label-width="120">
              <el-input
                v-model="formData.school_introduction"
                maxlength="3000"
                placeholder="请描述学校简介"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="住宿餐饮情况" label-width="120">
              <el-input
                v-model="formData.school_zscyqk"
                maxlength="3000"
                placeholder="请描述学校住宿餐饮情况"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="交通指南" label-width="120">
              <el-input
                v-model="formData.school_jtzn"
                maxlength="3000"
                placeholder="请描述学校交通指南"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="其他说明" label-width="120">
              <el-input
                v-model="formData.school_qtsm"
                maxlength="3000"
                placeholder="请描述学校其他说明"
                show-word-limit
                :rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item
              class="flexPull"
              label="轮播图"
              label-width="120"
              prop="school_banner"
            >
              <!-- <upMoreImg
                :propImgs="formData.school_banner"
                @ok="getImg"
              ></upMoreImg> -->
              <cropper-more
                :propImg="imgList"
                @successCropper="getImg"
              ></cropper-more>
            </el-form-item>
            <el-form-item class="flexPull" label=" " label-width="120">
              <btn
                :value="detailId ? '确认编辑' : '确认新增'"
                @ok="saveFn"
              ></btn>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
